@require "../../../css/variables.styl"
@require "../../../css/mixin.styl"

.va-df-input-combo
  position relative
  cursor default
  background #fff
  &[disabled]
    cursor not-allowed
    &:focus
      outline none
      box-shadow none
      border 1px solid #ccc

  .input-combo-label
    overflow hidden
    white-space nowrap
    text-overflow ellipsis
    padding-right 12px

  .right-icon
    line-height 1
    position absolute
    right 4px
    top 50%
    margin-top -6px
    transition all $time-df-transition ease-in-out

  &.is-open
    .right-icon
      transform rotate(180deg)

  .grid-panel
    min-height 54px
    top 32px
    left 0
    padding 4px 10px
    &.full-width
      right 0


.grid-panel
  user-select none
  cursor default
  line-height 18px

  .va-df-checkbox-wrapper
    height inherit

  .cell
    position relative
    padding 4px


  div.checkbox
    position absolute
    left 4px
    top 50%
    margin-bottom 0
    margin-top -11px
    height 20px
    width 22px


  tr
    position relative
    &.selected
      color $color-df-combo-body-selected-text
      border-color lighten($color-df-combo-active, 30%) !important

    &.active
      color $color-df-combo-body-hover-text
      td:first-child:after
        content ' '
        position absolute
        top 10px
        bottom 0
        left -6px
        width 4px
        height 4px
        border-top solid 4px transparent
        border-left solid 4px $color-df-combo-active
        border-bottom solid 4px transparent




  td
    position relative
    white-space nowrap


  tr:not(:last-child), th
    border-bottom solid 1px $color-df-combo-sep-border

  tbody
    color $color-df-combo-body-text

  th
    position relative
    padding 4px 0
    color $color-df-combo-head-text
    font-weight normal


  .expandBtn
    width 20px
    height 20px
    line-height 20px
    text-align center
    cursor pointer
    display inline-block

  .loading-mask
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    background $color-df-combo-loading-mask-bg
    opacity .6

  .loading-spinner
    position absolute
    left 50%
    top 50%
    font-size 14px
    margin-left -7px
    margin-top -7px


